<!DOCTYPE html>
<html class="white-bg">
<head>
    <meta charset="utf-8">
    <title>人员身份证号码识别</title>
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="stylesheet" href="/js/plugins/layui-256/css/layui.css"/>
    <link rel="stylesheet" href="/js/plugins/mui/css/mui.min.css">
    <link rel="stylesheet" href="/js/plugins/cropper/cropper.css">
     <link rel="stylesheet" type="text/css" href="/js/plugins/webuploader/webuploader.css">
    <style>
         #choice-btn {
            display: inline-block;
            height: 38px;
            line-height: 38px;
            padding: 0 18px;
            background-color: #009688;
            color: #fff;
            white-space: nowrap;
            text-align: center;
            font-size: 14px;
            border: none;
            border-radius: 2px;
            cursor: pointer;
        } 
    </style>
</head>
<body class="white-bg" style="padding-left: 10px;padding-top: 50px;text-align: center;">
<header class="mui-bar mui-bar-nav">
	<h1 class="mui-title">身份证照片</h1> 
</header>
<div style="margin: 10px;"> 
    <div class="layui-row">
    	<div style="overflow:hidden;height:563px;width:473px;margin: auto;">
			<div style="float:left; z-index:999;position:absolute;">
	            <div id="img-preview" style="height: 100px;width:185px; overflow: hidden;border: 1px dashed black;">
	            </div>
	        </div>
	        <div >
	         <!-- <div id="readyimg"
	                 style="height:384px ;width:290px ;border: 1px dashed black;background-color: rgb(247, 247, 247);">
	                <img id="img" src="" alt="" style="display:none">
	            </div> -->
	             <div id="readyimg"
	                 style="float: left;height:560px;width:470px ;border: 1px dashed black;background-color: rgb(247, 247, 247);background:url(/img/bg.jpg);background-size:100% 100%;">
	                <img id="img" src="" alt="" style="display:none">
	            </div> 
	        </div>
        </div>
    </div> 
    <div class="layui-hide oper-btn" style="margin-top: 10px;">

        <button style="width: 70px;background-color: #22ace6; color: #fff; border: 0;" type="button" class="mui-btn mui-icon mui-icon-arrowleft" cropper-event="rotate" data-option="-2"
                title="向左旋转"> 左旋
        </button>
        &nbsp;&nbsp;&nbsp;
        <button style="width: 70px;background-color: #22ace6; color: #fff; border: 0;" type="button" class="mui-btn mui-icon mui-icon-arrowright" cropper-event="rotate" data-option="2"
                title="向右旋转"> 右旋
        </button>
        &nbsp;&nbsp;&nbsp;
        <button style="width: 70px;background-color: #22ace6; color: #fff; border: 0;" type="button" class="mui-btn mui-icon mui-icon-reload" cropper-event="reset"
                title="恢复初始图片">重置
        </button>
        &nbsp;&nbsp;&nbsp;
        <button style="width: 70px;background-color: #22ace6; color: #fff; border: 0;" type="button" class="mui-btn mui-icon mui-icon-checkmarkempty" id="keep-save" cropper-event="confirmSave">识别
        </button>

    </div>
     <div style="margin-top: 10px;">
        <label for="cropper_imgUpload">
           <span id="choice-btn" class="mui-btn"><i class="mui-icon mui-icon-pengyouquan"></i>拍照</span>
        </label>
        <input type="file" id="cropper_imgUpload" name="file" style="display:none" accept="image/*" capture="camera">
    </div> 
    <div id="webuploader" style="display:none"></div>
</div>

<script src="/js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="/js/plugins/lodash/lodash.js"></script>
<script src="/js/plugins/layui-256/layui.all.js" type="text/javascript" charset="utf-8"></script>
<script src="/js/plugins/mui/js/mui.min.js" type="text/javascript" charset="utf-8"></script>
<script src="/js/plugins/webuploader/webuploader.js" charset="utf-8"></script>
<script>
    layui.config({
        base: '/js/plugins/cropper/'
    }).extend({
        cropper: 'cropper'
    }).use(['element', 'layer', 'cropper', 'jquery', 'jqcropper'], function () {
        var element = layui.element;
        var $ = layui.jquery;
        var layer = layui.layer;
        var cropper = layui.cropper;

        var imageEle = $("#img")
            ,preview = '#img-preview'
            , file = $("input[name='file']")
            , uploadImageMaxSize = 20480 //文件上传大小限制
            , options = {
            aspectRatio: 158 / 100, //控制裁剪框大小
            viewMode: 1,
            autoCropArea:0.95, //框的靠近边缘的比例
            preview: preview,
            dragMode: 'none',
            responsive: false,
            restore: false
            // cropBoxMovable:false,
            // cropBoxResizable:false,
        };
        // 找到上传图片的input标签绑定change事件
        $("#cropper_imgUpload").change(function () {
            $(".oper-btn").removeClass("layui-hide");
            // 1. 创建一个读取文件的对象
            $("#readyimg").empty();
            $("#readyimg").append('<img id="img" src="" alt="" style="display:none">');
            imageEle = $("#img");
            var fileReader = new FileReader();
            fileReader.readAsDataURL(this.files[0]);
            fileReader.onload = function () {
                // 2. 等上一步读完文件之后才 把图片加载到img标签中
                imageEle.attr("src", fileReader.result); //图片链接（base64）
                imageEle.cropper(options);
                var fs = document.getElementById('cropper_imgUpload'); 
                if(fs.files.length > 0) {
                    fs.value=null
                }

            };
        });

        $(".mui-btn").on('click', function () {
            var event = $(this).attr("cropper-event");
            //监听确认保存图像
            if (event === 'confirmSave') {
                //var base64url = imageEle.cropper("getCroppedCanvas").toDataURL('image/png');
                
                
                var type = imageEle.attr('src').split(';')[0].split(':')[1]; 
                var canVas = imageEle.cropper("getCroppedCanvas");
                //将裁剪的图片加载到face_image
                //('#face_image').attr('src', canVas.toDataURL()); 
                var fileBlob;
                canVas.toBlob(function(blob) {
                	indx = layer.load(2, { //icon支持传入0-2
	                        shade: [0.5, 'gray'], //0.5透明度的灰色背景
	                        content: '识别中...',
	                        success: function(layero){
	                            layero.find('.layui-layer-content').css('padding-top', '8px').css('width',"150px");
	                        }
	                    }
	                );
                	// 移除所有缩略图并将上传文件移出上传序列
                    for (var i = 0; i < uploader.getFiles().length; i++) {
					 	uploader.removeFile(uploader.getFiles()[i]);
					}
					uploader.reset();
                	uploader.addFiles(blob); 
                	
                    uploader.upload(); 
                }, type);
                //uploader.retry(file.id); 
               

            } else if (event === 'rotate') {
                //监听旋转
                var option = $(this).attr('data-option');
                imageEle.cropper('rotate', option);
            } else if (event === 'reset') {
                //重设图片
                imageEle.cropper('reset');
            }
        });
    });
    var GUID = WebUploader.Base.guid();//一个GUID
    var uploader = WebUploader.create({
        auto: false,// 选完文件后，是否自动上传。
        swf: '/js/plugins/webuploader/Uploader.swf',// swf文件路径
        server: '/api/webupload/upload',// 文件接收服务端。
        dnd: '#webuploader',
        //pick: '#choice-btn',// 内部根据当前运行是创建，可能是input元素，也可能是flash. 这里是div的id
        multiple: false, // 选择多个
        chunked: true,// 开起分片上传。
        chunkSize: 102400,//每一片的大小 0.1M
        threads: 5, // 上传并发数。允许同时最大上传进程数。
        method: 'POST', // 文件上传方式，POST或者GET。
        fileSizeLimit: 1024*1024*100*100, //验证文件总大小是否超出限制, 超出则不允许加入队列。
        fileSingleSizeLimit: 1024*1024*100, //验证单个文件大小是否超出限制, 超出则不允许加入队列。
        fileVal:'upload', // [默认值：'file'] 设置文件上传域的name。 
        accept: {
            title: 'Images',
            extensions: 'jpg,jpeg,png',
            mimeTypes: 'image/jpg,image/jpeg,image/png'
         },
         thumb: {
            type: 'image/jpg,jpeg,png'
         }, 
         formData: {
         	guid: GUID //自定义参数，待会儿解释
         },
         headers: {'userName': 'emi', 'token': '123456'} 
    });
    var indx ;
    uploader.on('fileQueued', function(file) {
    	
    });
 	 
    uploader.on('uploadSuccess', function(file, response) { 
    	
        $.ajax({
        	type: 'POST',
            url:"/api/webupload/mixChunks",
            data:{ guid: GUID, name: file.name },
            success:function (data){
            	if(data.code == 200){
            		layer.msg(data.data);
            	}else{
            		layer.msg(data.msg);
            	} 
            	layer.close(indx);
                console.log(data.data);
            },
            error(data){
            	layer.close(indx);
                layer.msg(data ? data.msg : "系统开小差");
            }
        });
        console.log(file.id+"传输成功");
    });
    uploader.on('uploadError', function(file) {
       
        console.log(file.id+'upload error')
    }); 
   /*  uploader.on( 'uploadAccept', function( file, response ) {
    	console.log(response);
    	$.post('/api/webupload/mixChunks', { guid: GUID, name: file.name }, function (data) {
   		 	console.log('已上传');
   		});
            //通过response中的数据判断是否上传成功，如果失败返回false给webuploader
        return false; 
    }); */
</script>
</body>
</html>
